<template>
  <div class="main">
    <div class="head_button">
      <el-button type="primary" @click="isLookChange()" v-if="!isLook"> 识别逾期客户 </el-button>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="公司客户">
        <PureTableBar class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small" :data="dataList"
              max-height="600" :columns="columns" :checkList="checkList" :pagination="pagination" :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
      <el-tab-pane label="零售客户">
        <PureTableBar class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive size="small"
              :data="dataList2" max-height="600" :columns="columns2" :checkList="checkList" :pagination="pagination2"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }" @size-change="handleSizeChanges" @current-change="handleCurrentChanges">
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useLookCustomer } from "./hook/slippageUser";
const {
  dataList,
  dataList2,
  pagination,
  pagination2,
  columns,
  columns2,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChanges,
  handleCurrentChanges,
  handleGetList,
  isLookChange,
  isLook,
} = useLookCustomer()

</script>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main {
  height: calc(100% - 32px);
}

::deep(.el-tabs) {
  height: 99%;
}

:deep(.el-dialog__body) {
  padding: 0;
  margin-top: 15px;
}

:deep(.el-row) {
  margin-bottom: 10px;
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-tabs__content) {
  padding: 5px 15px;
}

:deep(.mt-6) {
  margin: 0;
}

.head_button {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 3px;
}
</style>
